<template>
	<view style="margin: 50px 0 50px 20px;font-size: 20px;">
		<view style="display: flex;flex-wrap: wrap;">
			<view class="person_view" @click="showadduser" style="margin-right: 5px;width: 70px;height: 50px;">+</view>
			<view class="person_view" v-for="(item,index) in list" @click="setStatus(index)"
				:style="{backgroundColor:item.status==1?'#fd9e3f':'#e1e1e1'}"
				style="margin-right: 5px;width: 70px;height: 50px;">
				<text>{{item.user_name}}</text>
			</view>
		</view>
		<view style="height: 40px;background-color: #000;color: #fff;display: flex;flex-wrap: wrap;">
			<view style="flex: 1;display: flex;justify-content: center;align-items: center;" @click="setnum">
				{{set.num_count}}个球
			</view>
			<view style="width: 20px;background-color: #fff;"></view>
			<view style="flex: 1;display: flex;justify-content: center;align-items: center;" @click="settype">
				{{set.type}}打
			</view>
			<view style="width: 20px;background-color: #fff;"></view>
			<view v-if="set.count_type==2" style="flex: 1;display: flex;justify-content: center;align-items: center;"
				@click="setnumtype">
				减法算法
			</view>
			<view v-if="set.count_type==1" style="flex: 1;display: flex;justify-content: center;align-items: center;"
				@click="setnumtype">
				乘法算法
			</view>
			<view style="width: 20px;background-color: #fff;"></view>
			<view v-if="set.strong==1" style="flex: 1;display: flex;justify-content: center;align-items: center;"
				@click="setstrong">
				强化
			</view>
			<view v-if="set.strong==2" style="flex: 1;display: flex;justify-content: center;align-items: center;"
				@click="setstrong">
				不强化
			</view>
		</view>
		<view style="height: 40px;background-color: #000;color: #fff;display: flex;flex-wrap: wrap;margin-top: 10px;">
			<view style="flex: 1;display: flex;justify-content: center;align-items: center;color: red;" @click="reset">
				重置
			</view>
			<view style="width: 20px;background-color: #fff;"></view>
			<view style="flex: 1;display: flex;justify-content: center;align-items: center;" @click="confirm">
				确认
			</view>
		</view>
		<!-- <view style="position: fixed;bottom: 0;right: 0;">
			<view
				style="width: 100px;height: 100px;border-radius: 50px;background-color: red;color: #fff;display: flex;justify-content: center;align-items: center;font-size: 30px;"
				@click="confirm">
				确认
			</view>
		</view> -->
		<view v-if="show_input_name"
			style="position: fixed;top:0px;left: 20%;right:20%;width: 60%;background-color: #f1f1f1;height: 80px;">
			<view style="display: flex;align-items: center;">
				<view style="text-align: center;margin: 5px 0;color: red;flex: 1;">
					加人
				</view>
			</view>
			<view style="margin: 5px 20px;">
				<input type="text" @blur="setname" confirm-type="done"
					style="padding-left: 15px;border: 1px solid red;height: 20px;font-size: 10px;"
					placeholder="请输入姓名" />
			</view>
			<view style="display: flex;align-items: center;margin-right: 10px;margin-left: 10px;">
				<view class="person_view" style="margin-left: 10px;height: 20px;flex: 2;margin-bottom: 0;"
					@click="adduser">确认</view>
				<view class="person_view" style="margin-left: 10px;height: 20px;flex: 2;margin-bottom: 0;"
					@click="close">关闭</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/common/js/request'
	export default {
		data() {
			return {
				list: [],
				// type: 2, //2 双打 1 单打
				// count_type: 2, //1乘法算法 2减法算法
				// num_count: 5, //5个球 10个球
				// strong: 1, //1强化2不强化
				show_input_name: false,
				uids: [],
				user_name: '',
				set: {
					type: 2,
					num_count: 5,
					count_type: 2,
					strong: 1
				},
				timer: null,
				team3: null
			}
		},
		onLoad(options) {
			console.log('person-onLoad')
			this.reset();
		},
		onShow() {
			console.log('person-onShow')
			if (uni.getStorageSync('set')) {
				this.set = uni.getStorageSync('set')
			}
			console.log(this.set)
			if (uni.getStorageSync('list')) {
				this.list = uni.getStorageSync('list')
			}
		},
		onHide() {
			console.log('person-onHide')
			uni.setStorageSync('list', this.list);
			console.log(this.list)
			uni.setStorageSync('set', this.set);
			console.log(this.set)
			// let team3 = []
			// for (let i = 0; i < this.list.length; i++) {
			// 	if (this.list[i].status == 1 && this.list[i].team == 3) {
			// 		team3.push(this.list[i])
			// 	}
			// }
			// uni.setStorageSync('team3', team3);
			// console.log(team3)
		},
		methods: {
			getlist() {
				let that = this;
				let data = {}
				api.getNoSign('rank/users/getuserlist').then(res => {
					if (res.data.code == 1) {
						that.list = res.data.data.list;
						// uni.setStorageSync('list', that.list)
						console.log('羽毛球友列表', that.list)

						that.team3 = []
						for (let i = 0; i < that.list.length; i++) {
							if (that.list[i].status == 1 && that.list[i].team == 3) {
								that.team3.push(that.list[i])
							}
						}
						uni.setStorageSync('team3', that.team3);
					}
				})
			},
			adduser() {
				let that = this;
				if (!that.user_name) {
					uni.showToast({
						icon: 'none',
						title: "请输入姓名"
					})
					return;
				}
				let data = {
					user_name: that.user_name
				}
				api.getNoSign('rank/users/adduser', data).then(res => {
					console.log('添加羽毛球友', res)
					if (res.data.code == 1) {
						that.show_input_name = false;
						// that.list.push({
						// 	"uid": res.data.data.uid,
						// 	"user_name": user_name,
						// 	"ctime": 0,
						// 	"status": 1,
						// 	"team": 3
						// })
						// uni.setStorageSync('list', that.list)
						// that.setStatus(that.list.length, 1)
						// that.getlist();
						that.list.push({
							"uid": res.data.data.uid,
							"user_name": that.user_name,
							"ctime": 0,
							"status": 1,
							"total": 0,
							"win": 0,
							"score": 0,
							"team": 3,
						})
					}
				})
			},
			setStatus(index) {
				let item = this.list[index]
				if (item.team == 1 || item.team == 2) {
					uni.showToast({
						title: '不能删除场上球员',
						icon: 'none'
					})
					return;
				}
				let that = this;
				let data = {
					uid: item.uid,
					status: item.status
				}
				console.log(data)
				api.getNoSign('rank/users/setustatus', data).then(res => {
					console.log('羽毛球友的状态', res)
					if (res.data.code == 1) {
						// that.list[index].status = status;
						// // uni.setStorageSync('list', that.list)

						// let team3 = uni.getStorageSync('team3');
						// if (status == 2) {
						// 	for (let i = 0; i < team3.length; i++) {
						// 		if (team3[i].uid == that.list[index].uid) {
						// 			team3.splice(i, 1)
						// 		}
						// 	}
						// } else {
						// 	team3.splice(team3.length, 1, that.list[index])
						// }
						// uni.setStorageSync('team3', team3);
						// that.getlist();
						item.status = res.data.data.status;
						that.team3 = uni.getStorageSync('team3')
						if (item.status == 1) {
							that.team3.push(item)
						} else if (item.status == 2) {
							for (let i = 0; i < that.team3.length; i++) {
								if (that.team3[i].uid == item.uid) {
									that.team3.splice(i, 1)
								}
							}
						}
						uni.setStorageSync('team3', that.team3);
						console.log(that.team3)
					}
				})
			},
			showadduser() {
				this.show_input_name = true;
			},
			setname(event) {
				this.user_name = event.detail.value;
			},
			close() {
				this.show_input_name = false;
			},
			setnum() {
				let that = this;
				let itemList = ['5个球', '6个球', '7个球', '8个球', '9个球', '10个球', '20个球']
				uni.showActionSheet({
					itemList,
					success: function(res) {
						if (res.tapIndex == 6) {
							that.set.num_count = 20
						} else {
							that.set.num_count = res.tapIndex + 5
						}
					},
				})
			},
			settype() {
				let that = this;
				uni.showActionSheet({
					itemList: ['单打', '双打'],
					success: function(res) {
						if (res.tapIndex == 0) {
							that.set.type = 1
						} else {
							that.set.type = 2
						}
					},
				})
			},
			setnumtype() {
				let that = this;
				uni.showActionSheet({
					itemList: ['乘法算法', '减法算法'],
					success: function(res) {
						if (res.tapIndex == 0) {
							that.set.count_type = 1
						} else {
							that.set.count_type = 2
						}
					},
				})
			},
			setstrong() {
				let that = this;
				uni.showActionSheet({
					itemList: ['强化', '不强化'],
					success: function(res) {
						if (res.tapIndex == 0) {
							that.set.strong = 1
						} else {
							that.set.strong = 2
						}
					},
				})
			},
			confirm() {
				// var pages = getCurrentPages();
				// if (pages.length == 1) {
				// 	uni.redirectTo({
				// 		url: '/pages/index/index?do=init'
				// 	})
				// } else {
				// 	uni.navigateBack();
				// }
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			reset() {
				uni.clearStorageSync();
				this.set = {
					type: 2,
					num_count: 5,
					count_type: 2,
					strong: 1
				}
				this.getlist();
			},
		}
	}
</script>

<style>
	.person_view {
		width: 40px;
		height: 30px;
		background-color: red;
		border-radius: 5px;
		margin-right: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		margin-bottom: 5px;
	}
</style>